<template>
    <div>
        <van-sticky :offset-top="1" class="aui-bg-f">
            <header id="fixed" ref="header">
                <!-- <div class="title aui-text-center aui-text-f aui-ftn18" v-text="title"></div> -->
                <van-tabs v-model="active" background="var(--pink)" title-inactive-color="hsl(0 0% 100% / 0.7)" title-active-color="#fff" :line-height="0" @click="fnChangeType">
				  <van-tab v-for="(item) in tab_items" :key="item.id" :title="item.name">
				  </van-tab>
				</van-tabs>
                <div class="header_m aui-bg-f">
                    <van-row>
                        <van-col span="6" class="item aui-text-center" v-for="(item, index) in arr" :key="index" :class="{active: item.isActive}" @click="fnOpenCate(index)">
                            <span class="aui-ftn14" v-text="item.title"></span>
                            <i class="iconfont icon-shixinjiantou-xiangshang-copy aui-ftn14"></i>
                        </van-col>
                    </van-row>
                </div>
            </header>
        </van-sticky>
        <freeList ref="mylist" :title="title"></freeList>
        <!-- 常购类目 -->
        <van-overlay :show="category.show_lay" position="top">
            <div class="category aui-bg-f aui-padded-b-15">
                <div class="category_m">
                    <van-row v-if="category.select_type == 'category'" v-cloak>
                        <van-col span="12">
                            <div class="top">
                                <div class="item" v-bind:class="{ active: category.cur == 0}" @click="fnChangeCategory(0, '全部分类')">
                                    全部分类
                                    <i class="iconfont icon-gou aui-ftn12"></i>
                                </div>
                            </div>
                        </van-col>
                    </van-row>

                    <div class="content">
                        <van-row>
                            <van-col span="12" class="list" v-for="(list, i) in category.new_items" :key="i" v-cloak>
                                <div class="item" v-for="(item, index) in list" :key="index" v-bind:class="{ active: category.cur == item.id}" @click="fnChangeCategory(item.id, item.name)">
                                    {{item.name}}
                                    <i class="iconfont icon-gou aui-ftn12"></i>
                                </div>
                            </van-col>
                        </van-row>
                    </div>
                </div>
                <div class="aui-btn aui-btn-block aui-text-6 aui-ftn16 close_btn" @click="category.show_lay = false">关闭</div>
            </div>
        </van-overlay>
        <van-button class="kf_btn" round type="danger" @click="utils.openKefu()">
        <img
            width="38px"
            height="38px"
            src="../../assets/index/kf_btn.png"
            />
        </van-button>
    </div>
</template>
<script>
  import freeList from './components/list.vue'
  import list from "../../service/free_sy.js"
  import {mapGetters} from "vuex"
    export default {
        name: 'free_sy',
        components: {
          freeList
        },
        data () {
            return {
                title: '',
                cur: 0,
                select_title: '',
                is_open_frm: false,
                from: '',
                timer_list: [],
                timer_num: 0,
                timer_old_num: 0,
                is_show_pic: false,
				cur_title: '',
                params: {},
                is_scroll: false,
                category: {
                  show_lay: false,
                  index: 0,
                  cur: 0,
                  select_title: '',
                  select_type: '',
                  new_items:[],
                  items: [],
				  save_items: [],
                  sorts: [
                      {
                          id: 0,
                          name: '默认排序'
                      },
                      {
                          id: 1,
                          name: '份数最少'
                      },
                      {
                          id: 2,
                          name: '人气最高'

                      },{
                          id: 3,
                          name: '价格最高'
                      },
                      {
                          id: 4,
                          name: '最新发布'

                      }
                  ],
                  categories: [],
                  downtypes: [
                      {
                          id: 0,
                          name: '全部'

                      },
                      {
                          id: 1,
                          name: '淘宝'
                      },
                      {
                          id: 2,
                          name: '天猫'

                      },{
                          id: 3,
                          name: '京东'
                      },
                      {
                          id: 4,
                          name: '拼多多'

                      }, {
                          id: 5,
                          name: '阿里巴巴'
                      }, {
                          id: 6,
                          name: '抖音'
                      }, {
                          id: 7,
                          name: '快手'
                      }, {
                          id: 8,
                          name: '淘宝特价版'
                      }
                  ],
                  puttypes: [
                      {
                          id: 0,
                          name: '全部'

                      },
                      {
                          id: 1,
                          name: '自动通过'
                      },
                      {
                          id: 2,
                          name: '人工审核'

                      }
                  ]
                },
                arr: [{
                        title: '分类类别',
                        type: 'category',
                        id: 1,
                        isActive: false,
                        select_id: 0
                    },
                    {
                        title: '审核方式',
                        type: 'puttype',
                        id: 2,
                        isActive: false,
                        select_id: 0
                    },
                    {
                        title: '购买平台',
                        type: 'downtype',
                        id: 3,
                        isActive: false,
                        select_id: 0
                    },
                    {
                        title: '默认排序',
                        type: 'sort',
                        id: 4,
                        isActive: false,
                        select_id: 0
                    }],
                    tab_items: [
                        {
                            name: '零元购',
                            id: 1
                        },
                        {
                            name: '折扣',
                            id: 2
                        },
                        {
                            name: '超级购',
                            id: 4
                        },
                        {
                            name: '奖励购',
                            id: 3
                        }
                    ], 
                    active: 0
            }
        },
        activated () {
            if (this.$route.meta.keepAlive) {
                this.fnIntArr()
                var _param = JSON.parse(this.$store.state.param);
                this.title = _param.title;
                if (_param.category) {
                    this.arr[0].isActive = true;
                    this.arr[0].select_id = _param.category;
                    this.arr[0].title = this.$store.state.category[parseInt(_param.category) - 1].name;
                } 
                if (_param.puttype) {
                    this.arr[1].isActive = true;
                    this.arr[1].select_id = _param.puttype;
                    this.arr[1].title = this.category.puttypes[parseInt(_param.puttype)].name;
                }
                if (_param.downtype) {
                    this.arr[2].isActive = true;
                    this.arr[2].select_id = _param.downtype;
                    if (this.category.downtypes.length == 1) {
                        this.arr[2].title = '抖音';
                    } else {
                        if (this.category.downtypes[parseInt(_param.downtype)]) {
                            this.arr[2].title = this.category.downtypes[parseInt(_param.downtype)].name;
                        } else {
                            this.arr[2].title = '淘宝特价版'
                        }
                    }
                }
                if (_param.sort) {
                    this.arr[3].isActive = true;
                    this.arr[3].select_id = _param.puttype;
                    this.arr[3].title = this.category.sorts[parseInt(_param.sort)].name;
                }
                this.$refs.mylist.fnGetStorageData();
            }
        },
        computed: {
            ...mapGetters(["uid"]),
        },
        mounted () {
            this.utils.getQimo(this.uid);
        },
        methods: {
            // 图片预览
            fnPreview (img) {
                this.utils.fnPreviewPic([img])
            },
            // 打开筛选分类
            fnOpenCate: function(index) {
              this.cur = index;
              this.category.show_lay = true;
              this.category.cur = this.arr[index].select_id;
              this.category.index = this.cur;
              this.fnInitData(this.arr[index].type)
            },
            fnInitData: function(type) {
                this.category.select_type = type;
                switch (type) {
                    case 'category':
                        this.fnGetTabData();
                    break;
                    case 'sort':
                        this.category.items = this.category.sorts;
                    break;
                    case 'downtype':
                        this.category.items = this.$route.query.downtypeId == 6 ? [{id: 6,name: '抖音'}] :  this.category.downtypes;
                    break;
                    case 'puttype':
                        this.category.items = this.$route.query.title == '免审核区' ? [{id: 1,name: '自动通过'}] : this.category.puttypes
                    break;
                }
                this.fnEditItems()
            },
            // 分类
            fnGetTabData: function() {
				if (this.category.items.length > 0 && this.category.save_items.length > 0) {
					this.category.items = this.category.save_items;
					this.fnEditItems()
				} else {
					this.category.items = this.$store.state.category ?  this.$store.state.category : [];
					this.category.save_items = this.category.items;
					if (this.category.items.length == 0) {
						list.fnGetCate().then(res => {
						  if (res && res.status) {
							this.category.items = res.data;
							this.category.save_items = res.data;
							this.fnEditItems()
						  }
						})
					} else {
						this.fnEditItems()
					}
					
				}
            },
            // 重组items
            fnEditItems: function() {
                var n = parseInt(this.category.items.length / 6);
                var s = this.category.items.length % 6
                this.category.new_items = [];
                var _arr = [];
                if (n > 0) {
                    for (var i = 0; i < n; i++) {
                        _arr = this.category.items.slice(6*i, 6*i+6)
                        this.category.new_items.push(_arr)
                    }
                }
                if (s > 0) {
                    _arr = this.category.items.slice(6*n, 6*n+s)
                    this.category.new_items.push(_arr)
                }
            },
            // 选择分类id,title,返回当前选择的大类
            fnChangeCategory: function(id, title) {
                this.category.cur = id;
                if (id == 0) {
                    switch (this.category.select_type) {
                        case 'category':
                            this.category.select_title = '分类类别';
                        break;
                        case 'sort':
                            this.category.select_title = '默认排序';
                        break;
                        case 'downtype':
                            this.category.select_title = '购买平台';
                        break;
                        case 'puttype':
                            this.category.select_title = '审核方式';
                        break;
                    }
                } else {
                   this.category.select_title = title;
               }
               this.fnChangeCate(this.category.index, this.category.cur, this.category.select_title, this.category.select_type, this.params.typeId)
               this.category.show_lay = false;
            },
            // 切换类别
            fnChangeCate: function(index, id, title, cate_type, typeId) {
                this.cur = index;
                this.select_title = title;
				var vm = this;
				if (this.arr[index]) {
					this.arr[index].select_id = id;
					this.arr[index].title = title;
					this.arr[index].isActive = id == 0 ? false : true
				}
				// this.arr.forEach(function(item, index) {
				// 	if (item.title == '最新发布') {
				// 		vm.title = '最新发布'
				// 		return;
				// 	}  else {
				// 		vm.title = vm.cur_title && (vm.cur_title != '最新发布') ? vm.cur_title : '免费试用'
				// 	}
				// })
                this.$refs.mylist.fnChangeCate(id, cate_type, typeId);
            },
            // tab分类
            fnIntArr: function() {
                this.arr.forEach(function(item, index) {
                    if (item.isActive) {
                        item.isActive = false;
                        item.select_id = 0;
                        switch (index) {
                            case 0:
                                item.title = '分类类别';
                            break;
                            case 1:
                                item.title = '审核方式';
                            break;
                            case 2:
                                item.title = '购买平台';
                            break;
                            case 3:
                                item.title = '默认排序';
                            break;
                        }
                    }
                });
            },
            // 切换大分类 title:标题，index: 分类下标,cate_name:分类名称, cate_id: 分类id，type:大分类类型, downtype_id:平台
            fnChangeFrm: function(title, index, cate_name, typeId, categoryId,  downtypeId, puttypeId, sortId) {
                this.fnIntArr();
                if (this.arr[index]) {
                    this.arr[index].title = cate_name;
                    this.arr[index].isActive = true;
					if (downtypeId) {
						this.arr[index].select_id = 6
					} else if (this.$route.query.title == '免审核区') {
						this.arr[index].select_id = 1
					} else {
						this.arr[index].select_id = categoryId
					}
                }
                this.$refs.mylist.fnChangeFrm(typeId, categoryId,  downtypeId, puttypeId, sortId);
            },
            reload: function() {
                // this.title = this.params.title;
                this.fnChangeFrm(this.params.title, this.params.index, this.params.cate_name,this.params.typeId, this.params.categoryId, this.params.downtypeId, this.params.puttypeId, this.params.sortId)
            },
            // 切换分类
            fnChangeType (e) {
                let {id, name} = this.tab_items[e];
                this.active = e;
                this.params.typeId = id;
                this.fnChangeFrm(name, -1, '',id, '', '', '', '')
            },
            // 获取分类下标
            fnGetTypeIndex(id) {
                let index = this.tab_items.findIndex((item, index) => {
                    return item.id == id;
                })
                this.active = index;
            }
        },
        mounted () {
            this.params = this.$route.query;
            this.params.typeId && this.fnGetTypeIndex(this.params.typeId)
            this.reload()
        }
    }
</script>
<style lang="scss" scoped>
  .van-overlay {
    top: 80px!important;
    z-index: 999;
  }
  .category  {
    width: 100%;
  }
  .category .category_m {
      padding: 5px 20px 0 20px;
  }
  .close_btn {
    width: 188px;height: 36px;line-height: 36px;margin: auto
  }

  .category .list:nth-child(odd),
  .category .top {
      padding-right: 20px;
  }

  div.category div.list:nth-child(even) {
      padding-left: 20px;
  }

  div.category div.item {
      font-size: 14px;
      color: #777;
      line-height: 24px;
      margin-bottom: 13px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
  }

  div.category div.item i {
      color: #fff;
  }

  div.category  div.item.active {
      color: var(--pink);
      border-bottom: 1px solid var(--pink);
  }

  div.category  div.item.active i {
      color: var(--pink);
  }

  div.category div.button {
      background-color: #000;
      height: 50px;
      line-height: 50px;
      margin-top: 8px;
  }

header {
    background: url('../../assets/index/title_bg.png') no-repeat center center;
    background-size: cover;
}
div.title {
    height: 50px;
    line-height: 50px;
}
div.header_m {
    height: 37px;
    line-height: 37px;
}
div.header_m  div.item {
    color: #666;
}
div.header_m  div.item.active {
    color: var(--pink);
}
// 客服按钮
.kf_btn {
    position: fixed;
    bottom: 60px;
    right: 10px;
    z-index: 99999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
</style>
